<template>
	<div class="main">
		<navTop></navTop>
		<h3 class="addexamtitle">新建考试<i @click="$router.go(-1)">返回</i></h3>
		<div class="InputBox">
			<el-form ref="ruleForm" :model="form" label-width="80px">
				<el-form-item label="考试名称">
					<el-col :span="12">
						<el-input v-model="ruleForm.examname" placeholder="请填写考试名称"></el-input>
					</el-col>
				</el-form-item>
				<el-form-item label="考试时间" required>
				    <el-col :span="4">
				      <el-form-item prop="date1">
				        <el-date-picker type="date" placeholder="开始时间" v-model="ruleForm.startTime" style="width: 100%;"></el-date-picker>
				      </el-form-item>
				    </el-col>
				    <el-col class="line" :span="1">-</el-col>
				    <el-col :span="4">
				      <el-form-item prop="date1">
				        <el-date-picker type="date" placeholder="结束时间" v-model="ruleForm.endTime" style="width: 100%;"></el-date-picker>
				      </el-form-item>
				    </el-col>
				  </el-form-item>
				  <el-form-item label="考试类型">
				      <el-select v-model="ruleForm.examlx" placeholder="请选择考试类型">
						<el-option label="月考" value="shanghai"></el-option>
						<el-option label="中考" value="beijing"></el-option>
					  </el-select>
				  </el-form-item>
				  <el-form-item label="参考年级">
				      <el-select v-model="ruleForm.examclass" placeholder="请选择参考年级">
						<el-option label="高一" value="shanghai"></el-option>
						<el-option label="高二" value="beijing"></el-option>
						<el-option label="高三" value="beijing"></el-option>
					  </el-select>
				  </el-form-item>
				  <el-form-item label="分析类型">
				      <el-radio-group v-model="ruleForm.examfxlx">
						<el-radio label="新高考3+1+2"></el-radio>
						<el-radio label="老高考"></el-radio>
						<el-radio label="新高考3+3"></el-radio>
					  </el-radio-group>
				  </el-form-item>
				  <el-form-item label="考试学科" v-model="ruleForm.examxk">
				      <div class="addXueke">
						  <button><i class="el-icon-plus"></i>添加</button>
						  <span>已添加<i>5</i>个学科</span>
					  </div>
					  <div class="addxkName">
						  <span>语文</span>
						  <span>数学</span>
						  <span>英语</span>
						  <span>物理</span>
						  <span>化学</span>
						  <span>生物</span>
						  <span>历史</span>
						  <span>地理</span>
						  <span>政治</span>
					  </div>
				  </el-form-item>
				  <el-form-item label="考试班级" v-model="ruleForm.examBj">
				      <div class="addXueke">
						  <button><i class="el-icon-plus"></i>添加</button>
						  <span>已添加<i>1</i>个班级</span>
					  </div>
					  <div class="addxkName">
						  <span>高二1班</span>
						  <span>高二2班</span>
						  <span>高二3班</span>
					  </div>
				  </el-form-item>
				  <el-form-item label="考试状态" v-model="ruleForm.examState">
				      <el-select v-model="ruleForm.region" placeholder="请选择考试状态">
						<el-option label="进行中" value="shanghai"></el-option>
						<el-option label="未开始" value="beijing"></el-option>
						<el-option label="已完成" value="beijing"></el-option>
					  </el-select>
				  </el-form-item>
			</el-form>
			<div class="buttontwo">
				<el-button type="primary" @click="onSubmit">创建</el-button>
				<el-button>取消</el-button>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/top.vue"
	export default{
		data(){
			return{
				ruleForm: {
				  examname: '',
				  startTime:'',
				  endTime:'',
				  examlx:'',
				  examclass:'',
				  examfxlx:'',
				  examxk:'',
				  examBj:'',
				  examState:''
				}
			}
		},
		methods:{
			// 创建
			onSubmit(){
				
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background-color: rgba(245, 245, 245, 1);
		overflow-x:hidden;
		overflow-y: auto;
	}
	.main::-webkit-scrollbar {
		 height:8px;
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.main::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.addexamtitle{
		width:auto;padding:0 40px;
		box-sizing: border-box;
		line-height:75px;
		display: flex;
		justify-content: space-between;
		padding:0 15px;
		margin:15px auto;
		background:#fff;
		font-size:18px;
		align-items: center;
		font-weight: normal;
	}
	.addexamtitle i{
		font-style:normal;
		display: inline-block;
		width: 121px;
		height: 44px;
		line-height: 44px;
		border-radius: 18px;
		background-color: rgba(86, 119, 251, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 18px;
		text-align: center;
		cursor: pointer;
	}
	.InputBox{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		margin:0 auto;
		padding:30px;
		background:#fff;
		border-radius: 10px;
	}
	.line{
		text-align: center;
	}
	.addXueke{
		color: rgba(206, 206, 206, 1);
		font-size: 18px;
	}
	.addXueke span{
		padding-left:10px;
	}
	.addXueke i{
		color:rgba(86, 119, 251, 1);
		font-style:normal;
		font-weight: bold;
	}
	.addXueke button{
		width: 120px;
		height: 35px;
		line-height: 35px;
		background-color: rgba(255, 255, 255, 1);
		color: rgba(86, 119, 251, 1);
		font-size: 14px;
		text-align: center;
		border: 1px solid rgba(187, 187, 187, 1);
	}
	.addxkName{
		display: flex;
		align-items: center;
		margin-top:15px;
	}
	.addxkName span{
		width: 120px;
		height: 35px;
		line-height:35px;
		background-color: rgba(16, 16, 16, 0.24);
		color: rgba(16, 16, 16, 1);
		font-size: 14px;
		text-align: center;
		margin-right:15px;
		cursor: pointer;
	}
	.addxkName span:hover,.addxkName span.hover{
		background-color: rgba(86, 119, 251, 1);
		color: rgba(255, 255, 255, 1);
	}
	.buttontwo{
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.buttontwo >>> .el-button:first-child{
		width: 121px;
		height: 44px;
		border-radius: 18px;
		background-color: rgba(86, 119, 251, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 16px;
		text-align: center;
		border:none;
		margin-right:30px;
	}
	.buttontwo >>> .el-button:last-child{
		width: 121px;
		height: 44px;
		border-radius: 18px;
		background-color:none;
		color: rgba(86, 119, 251, 1);
		font-size: 16px;
		border: 1px solid rgba(86, 119, 251, 1);
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>